<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> -->
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
    <script src="JS\vue.min.js"></script>
    <script src="JS\axios.min.js"></script>
    <title>VueTest</title>
    <style>
      table tr td {
        border: 1px solid gray;
        padding: 10px;
      }
      table {
        border-collapse: collapse;
        width: 800px;
        table-layout: fixed;
      }
      tr.firstLine {
        background-color: lightGray;
      }
    </style>
  </head>

  <body>
    <div id="counter">
      {{counter}}
      <br />
      <div>一共点击了 {{clicknum}}次</div>
      <button @click="count">事件点击</button>
      <!-- <button @click="count">事件点击</button> -->
      <br />
      <br />
      <button v-on:click="toggle">{{showname}}</button>
      <div v-if="show">默认这一条是看得见的</div>
      <br />
      <br />
      <button v-on:click="BuyTip">下方提示是否中奖</button>
      <div v-if="IsShow">中奖</div>
      <div v-else>谢谢惠顾</div>
      <br />
      <button v-on:click="GetValue">查看分配结果</button>
      <div v-if="TempValue>98"></div>
      <div v-else-if="TempValue>95">结果1</div>
      <div v-else-if="TempValue>60">结果2</div>
      <div v-else-if="TempValue>50">结果3</div>
      <div v-else-if="TempValue>20">结果4</div>
      <div v-else>无分配结果</div>
      <br />
      <table>
        <tr v-for="item,index in SuperStar">
          <td>{{++index}}</td>
          <td>{{item.name}}</td>
          <td>{{item.hp}}</td>
        </tr>
      </table>
      <br />
    </div>
    <br />
    <div id="div1">
      {{title}} 循环语法
      <div v-for="i in 10">{{ i }}</div>
      <br />
      <a v-bind:href="page">跳转连接(完整语法)</a>
      <a :href="page">跳转连接(:bind简介语法)</a>
      <br />
      请输入字符串：<input v-model="InputValue" />
      <button @click="subInfo">提交数据</button>
      双向绑定测试->显示结果：{{InputValue}}
      <br />
      <br />
      <button @click="HttpHost">点击请求数据，下方测试绑定</button> <br />
      axios Get请求数据：{{HttpValue}}<br />
      axios Get请求状态：{{HttpState}}<br /><br />
      <table align="center">
        <tr class="firstLine">
          <td>视图类型</td>
          <td>输入数据</td>
          <td>绑定到Vue上的数值</td>
        </tr>
        <tr>
          <td>单行文本</td>
          <td>
            <input v-model="input" placeholder="输入数据" />
          </td>
          <td>
            <p>{{ input }}</p>
          </td>
        </tr>
        <tr>
          <td>多行文本</td>
          <td>
            <textarea v-model="textarea" placeholder="输入数据"></textarea>
          </td>
          <td>
            <p>{{ textarea }}</p>
          </td>
        </tr>
        <tr>
          <td>单个复选框</td>
          <td>
            <input type="checkbox" id="checkbox" v-model="checked" />
          </td>
          <td>
            <p>{{ checked }}</p>
          </td>
        </tr>
        <tr>
          <td>多个复选框</td>
          <td>
            <input
              type="checkbox"
              id="teemo"
              value="teemo"
              v-model="checkedes"
            />
            <label for="teemo">teemo</label>
            <input
              type="checkbox"
              id="gareen"
              value="gareen"
              v-model="checkedes"
            />
            <label for="gareen">gareen</label>
            <input
              type="checkbox"
              id="annie"
              value="annie"
              v-model="checkedes"
            />
            <label for="annie">annie</label>
          </td>
          <td>
            <p>{{ checkedes }}</p>
          </td>
        </tr>
        <tr>
          <td>单选按钮</td>
          <td>
            <input type="radio" id="one" value="One" v-model="radio" />
            <label for="one">One</label>
            <br />
            <input type="radio" id="two" value="Two" v-model="radio" />
            <label for="two">Two</label>
          </td>
          <td>
            <p>{{ radio }}</p>
          </td>
        </tr>
        <tr>
          <td>单选选择框</td>
          <td>
            <select v-model="selected" size="5">
              <option disabled value="">请选择</option>
              <option>AD</option>
              <option>AC</option>
              <option>ADC</option>
            </select>
          </td>
          <td>
            <p>{{ selected }}</p>
          </td>
        </tr>
        <tr>
          <td>多选选择框</td>
          <td>
            (通过ctrl或者shift进行多选)<br />
            <select v-model="selecteds" multiple size="5">
              <option disabled value="">请选择</option>
              <option>AD</option>
              <option>AC</option>
              <option>ADC</option>
            </select>
          </td>
          <td>
            <p>{{ selecteds }}</p>
          </td>
        </tr>
        <tr>
          <td>单个复选框</td>
          <td>
            默认值是true或者false,也可以修改为自定义的值<br />
            <input
              type="checkbox"
              id="toggle"
              true-value="yes"
              false-value="no"
              v-model="toggle"
            />
          </td>
          <td>
            <p>{{ toggle }}</p>
          </td>
        </tr>
      </table>
      <br />

      修饰符可重复叠加使用如:v-model.lazy.trim <br />
      请输入字符串,测试lazy<input v-model.lazy="teststringlazy" />
      <br />
      测试结果：{{teststringlazy}} <br />
      结果类型:{{typeof teststringlazy}} <br />

      请输入字符串,测试number<input v-model.number="teststringnum" />
      <br />
      测试结果：{{teststringnum}} <br />
      结果类型:{{typeof teststringnum}} <br />

      请输入字符串,测trim<input v-model.trim.lazy="teststringtrim" />
      <br />
      测试结果：{{teststringtrim}} <br />
      结果类型:{{typeof teststringtrim}} <br />
    </div>
  </body>
  <script>
    ///全局数据
    var SuperStars = [
      { name: "周润发", hp: 341 },
      { name: "刘德华", hp: 225 },
      { name: "张学友", hp: 427 },
      { name: "谭咏麟", hp: 893 },
    ];

    ///监听，条件语句，循环语句
    new Vue({
      el: "#counter",
      data: {
        counter: "Hello World!",
        clicknum: 0,
        show: true,
        showname: "显示",
        IsShow: false,
        TempValue: 0,
        SuperStar: SuperStars,
      },
      methods: {
        count: function () {
          this.clicknum++;
        },
        toggle: function () {
          this.show = !this.show;
          if (this.showname == "显示") {
            this.showname = "隐藏";
          } else {
            this.showname = "显示";
          }
        },
        BuyTip: function () {
          this.IsShow = Math.random() < 0.1;
        },
        GetValue: function () {
          this.TempValue = Math.random() * 100;
        },
      },
    });

    ///属性绑定语法
    new Vue({
      el: "#div1",
      data: {
        title: "该处是第二个Vue区域",
        page: "https://www.baidu.com",
        InputValue: "请输入数据进行测试",
        HttpValue: "",
        HttpState: 0,
        input: "",
        textarea: "",
        checked: "",
        checkedes: [],
        radio: "",
        selected: "",
        selecteds: [],
        toggle: "",
        teststringlazy: "",
        teststringnum: "",
        teststringtrim: "",
      },
      methods: {
        subInfo: function () {
          alert(this.InputValue);
        },
        HttpHost: function () {
          var _this = this;
          var url = "http://192.168.1.125:8128/PhotoProject/Home/VUETestGet";

          axios
            .get(url)
            .then(function (response) {
              console.log(response); //打印对象console.log(JSON.stringify(response));
              var jsonObject = response.data;

              // response.then(
              //   each((s) => {
              //     _this.HttpValue = s.message;
              //     _this.HttpState = s.Status;
              //   })
              // );

              console.log("字符串" + JSON.stringify(jsonObject));
              console.log("对象" + jsonObject);
              _this.HttpValue = jsonObject.message; ///双向绑定， DOM打印接口信息
              _this.HttpState = jsonObject.Status; ///双向绑定， DOM打印接口信息
            })
            .catch(function (res) {
              consolo.log(res);
            });
        },
      },
    });
  </script>
</html>
